iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

Modern CSS 超詳細新手攻略系列 第 6

[13th-鐵人賽]Day 6:Modern CSS 超詳細新手攻略 - Selector (二)

  • 分享至 

  • xImage
  •  

介紹完基礎選擇器,再來介紹一下複合選擇器~

  1. a b 選擇a元素裡的子元素
    https://ithelp.ithome.com.tw/upload/images/20210911/20141395p10gxG0c5X.jpg

  2. ab ab為同一元素但不同標籤
    https://ithelp.ithome.com.tw/upload/images/20210911/20141395iVV6ZpFj9D.jpg

  3. a, b 同時選擇a及b元素
    https://ithelp.ithome.com.tw/upload/images/20210911/20141395JU8LxG8cVd.jpg

  4. a + b 選擇與a元素相鄰的第一個b元素
    https://ithelp.ithome.com.tw/upload/images/20210911/201413958rYJoOmZfa.jpg

  5. a ~ b 選擇與a元素相鄰的所有b元素
    https://ithelp.ithome.com.tw/upload/images/20210911/20141395wBzSoyb39J.jpg

  6. a > b 選擇a元素內的直接子元素
    https://ithelp.ithome.com.tw/upload/images/20210911/201413954soCQMNeS5.jpg

Challenge

https://ithelp.ithome.com.tw/upload/images/20210911/20141395hPRhB19qu6.jpg


上一篇
[13th-鐵人賽]Day 5:Modern CSS 超詳細新手攻略 - Selector (一)
下一篇
[13th-鐵人賽]Day 7:Modern CSS 超詳細新手攻略 - 偽類 Pseudo Classes
系列文
Modern CSS 超詳細新手攻略11
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言